<template>
  <div>
<!--    <div>-->
<!--      <h3 v-model="date" id="timeStyle">当前日期：{{date | formatDate}}</h3>-->
<!--    </div>-->
<!--    <el-table-->
<!--        :data="dash_watcher"-->
<!--        border-->
<!--        style="width: 100%">-->
<!--      <el-table-column-->
<!--          fixed-->
<!--          prop="name"-->
<!--          label="姓名"-->
<!--          width="150">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="email"-->
<!--          label="邮箱"-->
<!--          width="200">-->
<!--      </el-table-column>-->
<!--      <el-table-column-->
<!--          prop="position"-->
<!--          label="岗位"-->
<!--          width="120">-->
<!--      </el-table-column>-->

<!--    </el-table>-->

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="week"
          label="日期"
          width="150">
      </el-table-column>
      <el-table-column
          prop="dutydate"
          label="时间"
          width="120"
      >
      </el-table-column>
      <el-table-column
          prop="watcher"
          label="值班人1"
          width="260"
          :formatter="stateFormat">
      </el-table-column>

      <el-table-column
          prop="watcher"
          label="值班人2"
          width="260"
          :formatter="stateFormat1">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        page-size="7"
        :total="100"
        @current-change="page"
    >
    </el-pagination>
  </div>

</template>
<script>
var padDate = function (value) {
  return value <10 ? '0' + value:value;
};
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
    stateFormat1(row, column) {
      let info=((JSON.parse(row.watcher))[1]);
      return info.name+" "+info.position+" "+info.email;
    },
    stateFormat(row, column) {
      let info=((JSON.parse(row.watcher))[0]);
      return info.name+" "+info.position+" "+info.email;
    },
    page(currentPage){
      const _this=this;
      axios.get('http://localhost:8089/banner/'+currentPage+'/7').then(function (resp){
        // alert(currentPage)
        console.log(resp);
        console.log(resp.data[1]);
        console.log(resp.data[1].watcher);
        console.log(JSON.parse(resp.data[1].watcher));
        _this.dash_watcher=JSON.parse(resp.data[1].watcher);
        console.log(((JSON.parse(resp.data[1].watcher))[0]).email);
        console.log(((JSON.parse(resp.data[1].watcher))[0]).name);
        console.log(((JSON.parse(resp.data[1].watcher))[0]).position);
        _this.tableData = resp.data
        _this.username=((JSON.parse(resp.data[0].watcher))[0]).name;
        // _this.total = resp.
      })
    },
    mounted() {
      let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.date = new Date(); // 修改数据date
      }, 1000)
    },
    beforeDestroy: function () {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  },
  // 程序一运行就会加载
  created(){
    const  _this= this
    axios.get('http://localhost:8089/banner/1/7').then(function (resp){
      // console.log(resp)
      _this.tableData = resp.data;
      _this.dash_watcher=JSON.parse(resp.data[1].watcher);
      console.log(_this.dash_watcher)
      console.log(resp)
      console.log(resp.data)
      console.log(((JSON.parse(resp.data[0].watcher))[0]).name);
      _this.username=((JSON.parse(resp.data[0].watcher))[0]).name;
      // _this.total = resp.
    })
  },

  data() {
    return {
      date: new Date(),
      dash_watcher:null,
      username:null,
      total:null,
      tableData:null
      //     [{
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   province: '上海',
      //   city: '普陀区',
      //   address: '上海市普陀区金沙江路 1518 弄',
      //   zip: 200333
      // }]
    }
  },
  filters: {
    formatDate:function (value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = padDate(date.getMonth()+1);
      var day = padDate(date.getDate());
      var hours = padDate(date.getHours());
      var minutes = padDate(date.getMinutes());
      var seconds = padDate(date.getSeconds());
      //var week = padDate(date.getDay());
      let week = new Date(value).getDay();
      let weeks = ["日","一","二","三","四","五","六"];
      let getWeek = "星期" + weeks[week];
      //return year + '-' + month + '-' + day +' '+'|' + ' ' + hours + ':' + minutes + ':' + seconds + ' ' +getWeek;
      return year + '-' + month + '-' + day +' '+'|'+' '  +getWeek;
    }
  }
}
</script>

<style scoped>

</style>